<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="标题" width="180" />
      <el-table-column prop="content" label="内容" width="180" />

      <el-table-column label="状态">
        <template #default="scope">
          <div>
            <span>是否公开</span>
            <el-switch
              v-model="scope.row.status"
              @change="
                editStatus(
                  scope.row.id,
                  scope.row.title,
                  scope.row.content,
                  scope.row.status
                )
              "
            />
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑时弹出的对话框 -->
    <el-dialog v-model="dialogFormVisible" title="修改文章" width="500">
      <el-form :model="form">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input
            v-model="form.content"
            autocomplete="off"
            style="width: 340px"
            :rows="2"
            type="textarea"
            placeholder="Please input"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import http from "@/utils/http";

import { reactive, ref } from "vue";

const tableData = ref({
  title: "",
  content: "",
  status: "",
  id: "",
});

//刷新列表，展示页面
function loadList() {
  http({
    url: "/posts",
    method: "get",
  }).then((r) => {
    console.log(r.data);
    tableData.value = r.data;
  });
}
loadList();

//删除
function handleDelete(index: number, row: any) {
  http({
    url: "/posts/" + row.id,
    method: "delete",
  }).then((r) => {
    console.log(r.data);
    loadList();
  });
}

//修改文章状态发送请求

function editStatus(id: any, title: any, content: any, status: any) {
  http({
    url: "/posts/" + id,
    method: "patch",
    data: {
      title: title,
      content: content,
      status: status,
    },
  }).then(() => {
    loadList();
  });
}

//编辑
//编辑时弹出对话框
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = reactive({
  title: "",
  content: "",
  status: "",
  id: "",
});

//点击编辑按钮弹出对话框
function handleEdit(index: number, row: any) {
  dialogFormVisible.value = true;
  form.title = row.title;
  form.content = row.content;
  form.status = row.status;
  form.id = row.id;
}

//点击保存发送请求
function saveEdit() {
  // console.log(form.title, form.status);
  http({
    url: "/posts/" + form.id,
    method: "patch",
    data: {
      title: form.title,
      content: form.content,
    },
  }).then((r: any) => {
    // console.log(r.status);
    if (r.status == 200) {
      loadList();
      dialogFormVisible.value = false;
    }
  });
}
</script>
<style lang=""></style>
